<template>
	<div class="add-blacklist-container">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="closeGroup">
			<el-form :model="form" :rules="rules" ref="blacklist" label-width="110px" class="demo-ruleForm">
				<el-form-item label="分组名" prop="groupName"> <el-input v-model="form.groupName" maxlength="10" placeholder="请输入分组名"></el-input> </el-form-item>
				<el-form-item label="来电拒接提示语" prop="callRejection">
					<el-input
						v-model="form.callRejection"
						placeholder="可填写被拒接原因以及申诉方式"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						maxlength="30"
						show-word-limit
						class="call-input"
						resize="none"
						style="resize: none"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeGroup">取消</el-button>
				<el-button type="primary" @click="sureGroup" class="sure-btn">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { backupData } from '@/utils/tool';
export default {
	name: '',
	components: {},
	props: {
		dialogVisible: {
			require: true,
			type: Boolean,
			default: () => false
		},
		title: {
			require: true,
			type: String,
			default: () => ''
		},
		groupList: {
			require: true,
			type: Array,
			default: () => []
		},
		editGroupData: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		const validateGroupName = (rule, value, callback) => {
			console.log(value, 'validateGroupName:');
			if (this.oldForm.groupName === value) {
				return callback();
			}
			if (this.groupList.find(item => item.groupName === value)) {
				return callback(new Error('分组名已存在'));
			}
			if (value.trim() === '') {
				return callback(new Error('分组名不能为空'));
			}
			return callback();
		};
		const validateCallRejection = (rule, value, callback) => {
			console.log(value, 'validateCallRejection:');
			if (value.trim() === '') {
				return callback(new Error('来电拒接提示语不能为空'));
			}
			return callback();
		};
		return {
			form: {
				groupName: '',
				callRejection: ''
			},
			rules: {
				groupName: [
					{ required: true, message: '分组名不能为空', trigger: 'blur' },
					{ validator: validateGroupName, trigger: 'blur' }
				],
				callRejection: [
					{ required: true, message: '来电拒接提示语不能为空', trigger: 'blur' },
					{ validator: validateCallRejection, trigger: 'blur' }
				]
			},
			oldForm: {}
		};
	},

	mounted() {
		console.log(this.groupList, 'title:', this.title);
		console.warn(this.editGroupData, 999);
		if (this.editGroupData?.groupName) {
			this.form = { ...this.editGroupData };
			this.oldForm = backupData(this.form);
			console.log('oldForm', this.oldForm);
		}
	},
	methods: {
		closeGroup() {
			this.$refs['blacklist'].resetFields();
			this.$emit('closeGroup');
		},
		sureGroup() {
			this.$refs['blacklist'].validate(valid => {
				if (valid) {
					this.$emit('sureGroup', this.form, this.oldForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.add-blacklist-container {
	position: relative;
	.call-input {
		/deep/.el-input__inner {
			height: 50px !important;
			// &::placeholder {
			// 	position: absolute;
			// 	top: 5px;
			// 	left: 10px;
			// }
		}
		/deep/ .el-input__count {
			bottom: -6px;
			background: none;
		}
	}
	.dialog-footer {
		border-radius: 4px;
		.sure-btn {
			background: #6384fe;
		}
	}
	/deep/ .el-dialog__body {
		border-top: 1px solid #ccc;
	}
	/deep/ .el-form-item__label {
		font-size: 12px;
	}
}
</style>
